<template>
  <div id="app" style="height:100%;">
    <transition :name="transitionName">
      <router-view class="router-view"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return {
      transitionName:'fade'
    }
  },
  watch: {
    $route (to, from) {
        // console.log(this.$router)
        let routes=this.$router.options.routes;
        console.log(routes)
        if(routes.indexOf(from)<routes.indexOf(to)){
          this.transitionName='content-right'
        }else{
          this.transitionName='content-left'
        }
    }
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';

html,
body {
  height: 100%;
  width: 100%;
  // overflow-x: hidden;
  background-color: #ffffff;
}
@media (min-width: 1024px){
  html,body{

    // text-align: center;
    .header{
      max-width:480px!important;
    }
    #app{
      max-width:480px;
      margin:0 auto;
    }
  }
}
.header {
    position: fixed!important;
    width: 100%;
    z-index: 999;
}
.content{
  padding-top: 46px;
}
</style>
<style lang="less">
.my-item {
    opacity: 0;
    animation-name: animationStyle1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    cursor: pointer;
}

.shown-loop(@n, @i: 1) when (@i <=@n) {
    .my-item:nth-child(@{i}) {
        animation-duration: @i*200ms;
    }
    .shown-loop(@n, (@i + 1));
}

.shown-loop(12);
@keyframes animationStyle1 {
    0% {
        opacity: 0;
        transform: rotateY(-90deg) translate3d(0, 30px, 0);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) translate3d(0, 0, 0);
    }
}

.fade-enter-active{
  transition: opacity .8s ease;
}

.fade-enter{
  opacity: 0
}
</style>
<style lang="less">
.weui-grid__label{
  margin-top:0.6em!important;
  font-size: 1.05em!important;
}
.weui-grid__icon{
  width:3.5em !important;
  height:3.5em !important;
}
</style>

